<template>
  <div>
    <div id="watermark" class="watermark"></div>
  </div>
</template>
<script>
import dataApi from "@/api/data";
export default {
  data() {
    return {
      items: [],
      chart: null,
      piename1 : "人工林面积",
      piename2 : "人工林蓄积"
    };
  },
  mounted() {
    this.prepareData();
  },
  methods: {
    prepareData() {
      this.items = dataApi.getData().then((response) => {
        this.items = response.data.items;
        this.initChart();
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("watermark"));
      let option = this.setChart(this);
      this.chart.setOption(option);
       this.chart.on('click',(param)=>{
          if(param.name=="人工林面积"||param.name=="天然林面积")
            {
              this.piename1=param.name;
              this.chart.setOption(this.setChart(this));
            }  
            if(param.name=="人工林蓄积"||param.name=="天然林蓄积")
            {
              this.piename2=param.name;
              this.chart.setOption(this.setChart(this));
            } 
      })
    },
    setChart(that) {
      var area_n;//天然林面积
      var area_a;//人工林面积
      var volume_n;//天然林蓄积
      var volume_a;//人工林蓄积
      //找面积和蓄积的中位数
      let num=[];
      num=this.getYearData("天然林面积");
      num.sort();
      area_n=(num[2]+num[3])/2;
      num=this.getYearData("人工林面积");
      num.sort();
      area_a=(num[2]+num[3])/2;
      num=this.getYearData("天然林面积");
      num.sort();
      volume_n=(num[2]+num[3])/2;
      num=this.getYearData("人工林面积");
      num.sort();
      volume_a=(num[2]+num[3])/2; 

      let builderJson = {
        charts: {
          "2013": this.getData(that.piename1,'2013'),
          "2014": this.getData(that.piename1,'2014'),
          "2015": this.getData(that.piename1,'2015'),
          "2016": this.getData(that.piename1,'2016'),
          "2017": this.getData(that.piename1,'2017'),
          "2018": this.getData(that.piename1,'2018')
        },
        components: {
          "2013": this.getData(that.piename2,'2013'),
          "2014": this.getData(that.piename2,'2014'),
          "2015": this.getData(that.piename2,'2015'),
          "2016": this.getData(that.piename2,'2016'),
          "2017": this.getData(that.piename2,'2017'),
          "2018": this.getData(that.piename2,'2018')
        }
      };
      let areaJson = {
          "天然林面积":area_n,
          "人工林面积":area_a
      };
      let volumeJson = {
        "天然林蓄积": volume_n,
        "人工林蓄积": volume_a
      };
      let option = {
        tooltip: {
        },
        title: [{
        text: '森林面积',
        left: '75%',
        textAlign: 'center'
    }, {
        text: '森林蓄积',
        left: '75%',
        top: '50%',
        textAlign: 'center'
    }],
        grid: [
          {
            top: 45,
            width: "50%",
            bottom: "50%",
            left: 10,
            containLabel: true,
          },
          {
            top: "55%",
            width: "50%",
            bottom: 10,
            left: 10,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            name: this.piename1,
            //max: builderJson.all,
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name:this.piename2,
            //max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            name: "年份",
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            type: "category",
            name:"年份",
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              normal: {
                position: "right",
                show: true,
              },
            },
            data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
          },
          {
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              normal: {
                position: "right",
                show: true,
              },
            },
            data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
        })
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "25%"],
            data: Object.keys(areaJson).map(function (key) {
            return {
                name: key,
                value: areaJson[key]
            }
        })
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "75%"],
            data: Object.keys(volumeJson).map(function (key) {
            return {
                name: key,
                value: volumeJson[key]
            };
        })
          },
        ],
      };
      return option;
    },

    getYearData(item){
        let res = [];
        for (let i = 0; i < this.items.length; i++){
            if(this.items[i]["city"] === "北京")
                res.push(Number(this.items[i][item]))
        }
        return res;
    },
    getData(item, year) {
      let res;
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === "北京" && this.items[i]["年份"] === year)
          res = Number(this.items[i][item]);
      }
      return res;
    }
  },
};
</script>
<style scoped>
.watermark {
  width: 100%;
  height: calc(80vh);
  float: left;
}
</style>